<!DOCTYPE html>
<html>
	<!--备份助记词-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			.hea{
				font-size: 18px;
				color: rgba(51, 51, 51, .9);
				text-align: center;
				padding-top:50px; 
				padding-bottom:30px; 
			}
			.notice{
				padding-bottom: 20px;
				color: rgba(51, 51, 51, .6);
				font-size: 15px;
				line-height: 22px;
				letter-spacing: 1px;
			}
			#zujici{
				padding:20px 10px;
				font-size: 15px;
				line-height: 25px;
				background: #EAF1FE; 
				color: rgba(51, 51, 51, .6);

			}
			.button{
				display: block;
				width: 100%;
				height: 30px;
				margin: 30px 0;
				text-align: center;
				border-radius: 20px;
				border: none;
				outline: none;
				background: #3573FA;
				color: white;
			}
			#mask{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				background: rgba(0,0,0,.5);
			}
			#mask>.ma-con{
				width: 60%;
				background: white;
				border-radius: 10px;
			}
			#mask>.ma-con>.ma-pi{
				height: 50px;
				margin: 10px 0;
				background: url(skin/img/no-pho.png) no-repeat center center;
				background-size: 50px 33px;
				line-height: 110px;
				text-align: center;
				font-size: 15px;
				color: rgba(0,0,0,.7);
			}
			#mask>.ma-con>p{
				padding: 10px 25px;
				line-height: 25px;
				font-size: 13px;
				opacity: .6;
			}
			#mask>.ma-con>button{
				width: 100%;
				height: 35px;
				background: #3573FA;
				border: none;
				outline: none;
				color: white;
				border-radius: 0 0 10px 10px;
			}
			.animated{
				animation-duration: .4s;
				animation-fill-mode:both;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<transition
				enter-active-class='animated zoomIn'	
				leave-active-class='animated zoomOut'
			>
				<div id="mask" v-if='offMask' @click='offMask=false'>
					<div class='ma-con' @click.stop=''>
						<div class='ma-pi'>
							<p>请勿截图</p>
						</div>
						<p>如果有人获取你的助记词将直接获取你的资产！请抄写下助记词并存放在安全的地方。</p>
						<button @click='next'>知道了</button>
					</div>
				</div>
			</transition>
			<h1 class='hea'>抄写下你的钱包助记词</h1>
			<p class='notice'>助记词用于恢复钱包或重置钱包密码，将它准确的抄写到纸上，并存放在的只有你知道的安全的地方。</p>
			<div id="zujici">
				sdkfklj sdkljf sdfjk sdfajk sdfjkla dsfwei fgkljrtoi edswiug sdhfaws sdfyuqawseghdf sdfgbhauysdewf sdghfauysdf sdahfg
			</div>
			<button class='button' @click="offMask=true">下一步</button>
		</div>
		<script src="skin/js/back.js" type="text/javascript" charset="utf-8"></script>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					offMask:false
				},
				methods:{
					next:function(){
						this.offMask=false;
						var style=viewTitle(true,'#3573fa','备份助记词','#ffffff');  
						plus.webview.open('backup-words3.html','backupWords3',style,'slide-in-right');
					}
				}
			});
		</script>
	</body>
</html>


